<template>
  <header class="header">
    <div class="container">
      <nav class="dropdown-container">
        <ul>
          <li @click="toggleMenu" class="menu-item">
            全部
            <span :class="['arrow', { 'rotate': isMenuVisible }]">▾</span>
          </li>
          <li class="search-item">
            <input type="text" v-model="searchQuery" placeholder="请输入搜索内容">
            <button @click="performSearch">搜索</button>
          </li>
        </ul>
        <!-- Dropdown menu -->
        <div>
          <ul v-if="isMenuVisible" class="dropdown-menu">
            <li class="dog" @mouseover="showDropdown('dog')" @mouseout="hideDropdown('dog')">
              <a href="#">DOGS狗</a>
            </li>
            <li class="cat" @mouseover="showDropdown('cat')" @mouseout="hideDropdown('cat')">
              <a href="#">CATS猫</a>
            </li>
            <li class="other" @mouseover="showDropdown('other')" @mouseout="hideDropdown('other')">
              <a href="#">Other Pets其他宠物</a>
            </li>
            <li class="us" @mouseover="showDropdown('us')" @mouseout="hideDropdown('us')">
              <a href="#">About US关于我们</a>
            </li>
          </ul>
          <ul class="downdog uu" :class="{ 'show': showDropdowns['dog'] }" @mouseover="showDropdown('dog')"
            @mouseout="hideDropdown('dog')">
            <li><router-link to="/adoptdog" class="menu-link">Dog Adoption领养</router-link></li>
            <li><router-link to="/seachdog" class="menu-link">Searching for dogs寻找</router-link></li>
            <li><router-link to="/articlesdog" class="menu-link">Dog Adoption Articles文章</router-link></li>
          </ul>

          <ul class="downcat uu" :class="{ 'show': showDropdowns['cat'] }" @mouseover="showDropdown('cat')"
            @mouseout="hideDropdown('cat')">
            <li><router-link to="/adoptcat" class="menu-link">Cat Adoption领养</router-link></li>
            <li><router-link to="/seachcat" class="menu-link">Searching for cats寻找</router-link></li>
            <li><router-link to="/articlescat" class="menu-link">Cat Adoption Articles文章</router-link></li>
          </ul>

          <ul class="downother uu" :class="{ 'show': showDropdowns['other'] }" @mouseover="showDropdown('other')"
            @mouseout="hideDropdown('other')">
            <li><router-link to="/adoptother" class="menu-link">Other Adoption领养</router-link></li>
            <li><router-link to="/seachother" class="menu-link">Searching for other pets寻找</router-link></li>
            <li><router-link to="/articlesother" class="menu-link">Other Adoption Articles文章</router-link></li>
          </ul>

          <ul class="downus uu" :class="{ 'show': showDropdowns['us'] }" @mouseover="showDropdown('us')"
            @mouseout="hideDropdown('us')">
            <li><router-link to="/join" class="menu-link">Join Us</router-link></li>
            <li><router-link to="/donation" class="menu-link">Charitable contribution</router-link></li>
          </ul>
        </div>
      </nav>

    </div>
    <div class="h-right">
      <div class="avtor">
        <img v-if="Avatar" :src="Avatar" alt="User Avatar">
      </div>
      <div class="r-t">
        <span v-if="Nickname" class="q">{{ Nickname }}</span>
        <span class="aa">▾</span>
      </div>
      <ul>
        <li><router-link to="/update">修改个人信息</router-link></li>
        <li><a @click="handleLogout">退出！</a></li>
      </ul>
    </div>
    <div class="h-b">
      <button><router-link to="/contact">发布帖子</router-link></button>
    </div>
  </header>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
const accountName = ref(''); // 新增用户昵称变量
const Avatar = (ref('')); //头像变量
const Nickname = (ref('')); //用户昵称
import { useRouter } from 'vue-router'; // 导入 useRouter
const router = useRouter();
const searchQuery = ref(''); // 搜索框内容
const isMenuVisible = ref(false);
const showDropdowns = ref({
  dog: false,
  cat: false,
  other: false,
  us: false
});

const handleLogout = () => {
  sessionStorage.removeItem('user');
  router.push({ name: 'login' });
};
const toggleMenu = () => {
  isMenuVisible.value = !isMenuVisible.value;
};
const showDropdown = (key) => {
  showDropdowns.value[key] = true;
};
const hideDropdown = (key) => {
  showDropdowns.value[key] = false;
};
const performSearch = async () => {

  router.push({ name: 'seach', query: { results: JSON.stringify(222) } });
  try {

    const query = searchQuery.value;
    const response = await axios.post('http://localhost:8080/Petrescue/blog/Blogs', {
      dwType: "",
      blogType: "",
      search: query,
    });
    const { code, data, message } = response.data;
    if (code == 200) {
      searchResults.value = data; // 将后端返回的数据存储到 searchResults 数组中
      router.push({ name: 'seach', query: { results: JSON.stringify(data) } });
    } else {
      alert(message);
    }
  } catch (error) {
    console.error('Failed to fetch dogs:', error);
  }


};
onMounted(() => {
  const storedUser = sessionStorage.getItem('user');
  if (storedUser) {
    const { account, avatar, nickname } = JSON.parse(storedUser);
    accountName.value = account;
    Avatar.value = avatar;
    Nickname.value = nickname;
  }
});
document.addEventListener('DOMContentLoaded', function () {
  var rT = document.querySelector('.r-t');
  var ul = document.querySelector('.h-right > ul');

  // 点击 .r-t 显示 <ul>
  rT.addEventListener('click', function (event) {
    event.stopPropagation();
    if (ul.style.display === 'block') {
      ul.style.display = 'none';
    } else {
      ul.style.display = 'block';
    }
  });

  // 鼠标移入 <ul> 时取消隐藏计时器
  ul.addEventListener('mouseenter', function () {
    clearTimeout(this.hideTimeout);
  });

  // 鼠标移出 <ul> 时设置隐藏计时器
  ul.addEventListener('mouseleave', function () {
    var self = this;
    this.hideTimeout = setTimeout(function () {
      self.style.display = 'none';
    }, 200); // 延迟200ms后隐藏，防止快速移动鼠标造成误操作
  });

  // 点击文档其他地方关闭菜单
  document.addEventListener('click', function (event) {
    if (!event.target.closest('.h-right')) {
      ul.style.display = 'none';
    }
  });
});
</script>

<style scoped>
.header {
  width: 100%;
  background: linear-gradient(135deg, #fff9f0 0%, #fef3c7 100%);
  padding: 12px 0;
  position: relative;
  box-shadow: 0 2px 10px rgba(124, 45, 18, 0.1);
  border-bottom: 1px solid rgba(234, 88, 12, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.container {
  width: auto;
  margin: 0;
  flex-grow: 1;
}

.dropdown-container {
  position: relative;
  margin-left: 120px;
}

.dropdown-container>ul {
  display: flex;
  align-items: center;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-item {
  color: #7c2d12;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.menu-item:hover {
  background-color: rgba(234, 88, 12, 0.1);
  color: #c2410c;
}

.arrow {
  margin-left: 6px;
  transition: transform 0.3s ease;
}

.arrow.rotate {
  transform: rotate(180deg);
}

.search-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-item input {
  padding: 8px 15px;
  border: 1px solid #f59e0b;
  border-radius: 20px;
  background-color: rgba(254, 243, 199, 0.7);
  color: #7c2d12;
  width: 200px;
  transition: all 0.3s ease;
}

.search-item input:focus {
  outline: none;
  border-color: #ea580c;
  box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.2);
}

.search-item button {
  padding: 8px 15px;
  background: linear-gradient(90deg, #ea580c 0%, #c2410c 100%);
  color: white;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.search-item button:hover {
  background: linear-gradient(90deg, #c2410c 0%, #9a3412 100%);
  transform: translateY(-1px);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  height: 50px;
  background: linear-gradient(90deg, #ea580c 0%, #c2410c 100%);
  border-radius: 0 0 8px 8px;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  z-index: 100;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.dropdown-menu li {
  padding: 12px 20px;
  position: relative;
}

.dropdown-menu li a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  display: block;
  transition: all 0.2s ease;
}

.dropdown-menu li a:hover {
  color: #fef3c7;
}

.dropdown-menu li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 60%;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.3);
}

.uu {
  position: absolute;
  background-color: #9a3412;
  border-radius: 0 0 8px 8px;
  list-style: none;
  padding: 8px 0;
  margin: 0;
  z-index: 100;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: none;
  top: 50px;
}

.uu.show {
  display: block;
}

.uu li {
  padding: 8px 20px;
}

.menu-link {
  color: #fef3c7;
  text-decoration: none;
  display: block;
  transition: all 0.2s ease;
  padding: 6px 0;
}

.menu-link:hover {
  color: white;
  background-color: rgba(234, 88, 12, 0.3);
  border-radius: 4px;
}

.menu-link.router-link-exact-active {
  color: white;
}

.downdog {
  left: 0;
  top: 100%;
}

.downcat {
  left: 120px;
  top: 100%;
}

.downother {
  left: 240px;
  top: 100%;
}

.downus {
  left: 400px;
  top: 100%;
}

.h-right {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  margin-right: 20px;
}

.avtor {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(234, 88, 12, 0.3);
}

.avtor img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.r-t {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.q {
  color: #7c2d12;
  font-weight: 500;
}

.aa {
  color: #9a3412;
}

.h-right>ul {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: #fff9f0;
  border: 1px solid rgba(234, 88, 12, 0.3);
  border-radius: 8px;
  padding: 8px 0;
  list-style: none;
  min-width: 160px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: none;
  z-index: 100;
}

.h-right>ul li {
  padding: 8px 16px;
}

.h-right>ul li a {
  color: #7c2d12;
  text-decoration: none;
  display: block;
  transition: all 0.2s ease;
}

.h-right>ul li a:hover {
  color: #ea580c;
  background-color: rgba(234, 88, 12, 0.1);
}

.h-right:hover>ul {
  display: block;
}

.h-b {
  margin-right: 20px;
}

.h-b button {
  padding: 8px 16px;
  background: linear-gradient(90deg, #ea580c 0%, #c2410c 100%);
  color: white;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.h-b button:hover {
  background: linear-gradient(90deg, #c2410c 0%, #9a3412 100%);
  transform: translateY(-1px);
}

.h-b button a {
  color: white;
  text-decoration: none;
}
</style>